// LoginScreen.qml - 用户登录界面
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Rectangle {
    color: "#f8f9fa"  // 设置背景颜色

    // 背景装饰元素 - 圆形装饰
    Rectangle {
        width: 300
        height: 300
        radius: width / 2  // 圆形
        color: "#e3f2fd"   // 浅蓝色
        opacity: 0.6       // 半透明
        x: -width / 3      // 部分超出左边界
        y: -height / 3     // 部分超出上边界
    }

    // 第二个背景装饰元素
    Rectangle {
        width: 200
        height: 200
        radius: width / 2  // 圆形
        color: "#bbdefb"   // 更浅的蓝色
        opacity: 0.4       // 更透明
        x: parent.width - width / 2  // 右下角位置
        y: parent.height - height / 2
    }

    // 主布局 - 垂直列布局
    ColumnLayout {
        anchors.centerIn: parent  // 居中显示
        width: Math.min(parent.width * 0.8, 400)  // 宽度不超过400px或父容器的80%
        spacing: 20  // 子项间距

        // 标题区域
        ColumnLayout {
            Layout.alignment: Qt.AlignHCenter  // 水平居中
            spacing: 5  // 子项间距

            // 聊天图标
            Image {
                Layout.alignment: Qt.AlignHCenter
                source: "qrc:/images/chat-icon.svg" // 聊天图标路径
                sourceSize.width: 60
                sourceSize.height: 60
                fillMode: Image.PreserveAspectFit  // 保持宽高比

                // 图标加载失败时的备用文本
                Text {
                    visible: parent.status === Image.Error || parent.source === ""
                    text: "💬"  // 聊天表情符号
                    font.pixelSize: 40
                    anchors.centerIn: parent
                }
            }

            // 主标题
            Text {
                text: qsTr("视频会议登录")  // 国际化翻译
                font.pixelSize: 28
                font.weight: Font.Bold  // 粗体
                color: "#2c3e50"        // 深蓝色
                Layout.alignment: Qt.AlignHCenter
            }

            // 副标题
            Text {
                text: qsTr("欢迎回来，请登录您的账户")
                font.pixelSize: 14
                color: "#7f8c8d"  // 灰色
                Layout.alignment: Qt.AlignHCenter
            }
        }

        // 表单区域
        ColumnLayout {
            spacing: 15  // 表单项间距
            Layout.fillWidth: true  // 填充宽度

            // 用户名输入框组
            ColumnLayout {
                spacing: 5
                Layout.fillWidth: true

                // 用户名标签
                Text {
                    text: qsTr("用户名")
                    font.pixelSize: 14
                    color: "#34495e"  // 深灰色
                }

                // 用户名输入框
                TextField {
                    id: usernameInput
                    Layout.fillWidth: true
                    placeholderText: qsTr("请输入用户名")  // 占位文本
                    font.pixelSize: 16
                    selectByMouse: true  // 允许鼠标选择文本
                    padding: 12

                    // 自定义背景
                    background: Rectangle {
                        radius: 8  // 圆角
                        border.color: usernameInput.activeFocus ? "#3498db" : "#ddd"  // 聚焦时蓝色边框
                        border.width: usernameInput.activeFocus ? 2 : 1
                        color: "white"  // 白色背景
                    }
                }
            }

            // 密码输入框组
            ColumnLayout {
                spacing: 5
                Layout.fillWidth: true

                // 密码标签
                Text {
                    text: qsTr("密码")
                    font.pixelSize: 14
                    color: "#34495e"
                }

                // 密码输入框
                TextField {
                    id: passwordInput
                    Layout.fillWidth: true
                    placeholderText: qsTr("请输入密码")
                    font.pixelSize: 16
                    selectByMouse: true
                    echoMode: TextInput.Password  // 密码模式，显示为圆点
                    padding: 12

                    background: Rectangle {
                        radius: 8
                        border.color: passwordInput.activeFocus ? "#3498db" : "#ddd"
                        border.width: passwordInput.activeFocus ? 2 : 1
                        color: "white"
                    }
                }
            }
        }

        // 按钮区域
        ColumnLayout {
            spacing: 10
            Layout.fillWidth: true

            // 登录按钮
            Button {
                id: loginBtn
                Layout.fillWidth: true
                text: qsTr("登录")
                font.pixelSize: 16
                font.weight: Font.Medium  // 中等粗细
                enabled: usernameInput.text && passwordInput.text  // 用户名和密码都有内容时才启用
                padding: 15

                // 自定义按钮背景
                background: Rectangle {
                    radius: 8
                    color: loginBtn.enabled ? "#3498db" : "#bdc3c7"  // 启用时蓝色，禁用时灰色
                    opacity: loginBtn.down ? 0.8 : 1.0  // 按下时变透明
                }

                // 按钮文本样式
                contentItem: Text {
                    text: loginBtn.text
                    font: loginBtn.font
                    color: "white"  // 白色文字
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }

                // 点击事件处理
                onClicked: {
                    // 调用C++后端的登录验证功能
                    if (userDatabase.loginUser(usernameInput.text, passwordInput.text)) {
                        // 登录成功，保存用户信息并跳转到开始界面
                        networkManager.setUsername(usernameInput.text)
                        root.nowIp = usernameInput.text
                        root.nowPort = passwordInput.text
                        root.showStartScreen()
                    } else {
                        // 登录失败，显示错误信息
                        errorText.text = "登录失败，用户名或密码错误"
                        errorText.color = "#e74c3c" // 红色错误提示
                    }
                }
            }

            // 注册账号按钮
            Button {
                id: registerBtn
                Layout.fillWidth: true
                text: qsTr("注册账号")
                font.pixelSize: 16
                padding: 12
                flat: true  // 扁平样式

                background: Rectangle {
                    radius: 8
                    color: registerBtn.down ? "#ecf0f1" : "transparent"  // 按下时显示背景色
                }

                contentItem: Text {
                    text: registerBtn.text
                    font: registerBtn.font
                    color: "#7f8c8d"  // 灰色文字
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }

                onClicked: {
                    root.showRegisterScreen()  // 切换到注册界面
                }
            }
        }

        // 错误信息显示文本
        Text {
            id: errorText
            Layout.fillWidth: true
            color: "#e74c3c"  // 红色
            font.pixelSize: 14
            wrapMode: Text.Wrap  // 自动换行
            horizontalAlignment: Text.AlignHCenter  // 水平居中
        }
    }
}
